import React, { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import './AboutSection.scss';

gsap.registerPlugin(ScrollTrigger);

const AboutSection: React.FC = () => {
  const aboutRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
  const imageRef = useRef<HTMLDivElement>(null);
  const statsRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // 内容区域动画
    gsap.fromTo(contentRef.current,
      {
        x: -100,
        opacity: 0
      },
      {
        x: 0,
        opacity: 1,
        duration: 1.2,
        ease: 'power3.out',
        scrollTrigger: {
          trigger: contentRef.current,
          start: 'top 80%',
          end: 'bottom 20%',
          toggleActions: 'play none none reverse'
        }
      }
    );

    // 图片区域动画
    gsap.fromTo(imageRef.current,
      {
        x: 100,
        opacity: 0
      },
      {
        x: 0,
        opacity: 1,
        duration: 1.2,
        ease: 'power3.out',
        scrollTrigger: {
          trigger: imageRef.current,
          start: 'top 80%',
          end: 'bottom 20%',
          toggleActions: 'play none none reverse'
        }
      }
    );

    // 统计数据动画
    const statItems = statsRef.current?.children;
    if (statItems) {
      gsap.fromTo(Array.from(statItems),
        {
          y: 50,
          opacity: 0
        },
        {
          y: 0,
          opacity: 1,
          duration: 1,
          stagger: 0.2,
          ease: 'power2.out',
          scrollTrigger: {
            trigger: statsRef.current,
            start: 'top 80%',
            end: 'bottom 20%',
            toggleActions: 'play none none reverse'
          }
        }
      );
    }

    return () => {
      ScrollTrigger.getAll().forEach(trigger => trigger.kill());
    };
  }, []);

  return (
    <section ref={aboutRef} className="about-section" id="about">
      <div className="about-container">
        <div ref={contentRef} className="about-content">
          <div className="content-header">
            <h2>关于摄影师</h2>
            <div className="header-line"></div>
          </div>
          <div className="content-text">
            <p>
              我是一名专业风光摄影师，致力于捕捉自然界最美的瞬间。从雄伟的山川到宁静的湖泊，
              从绚烂的日出到静谧的夜空，我用镜头记录着这个世界的无尽美好。
            </p>
            <p>
              摄影不仅仅是按下快门的瞬间，更是对光影、构图、色彩的深度理解和艺术表达。
              每一张照片背后都承载着我对自然的敬畏和对美的追求。
            </p>
          </div>
          <div className="content-skills">
            <div className="skill-item">
              <span className="skill-name">风光摄影</span>
              <div className="skill-bar">
                <div className="skill-progress" data-progress="95"></div>
              </div>
            </div>
            <div className="skill-item">
              <span className="skill-name">人像摄影</span>
              <div className="skill-bar">
                <div className="skill-progress" data-progress="88"></div>
              </div>
            </div>
            <div className="skill-item">
              <span className="skill-name">后期制作</span>
              <div className="skill-bar">
                <div className="skill-progress" data-progress="92"></div>
              </div>
            </div>
          </div>
        </div>
        <div ref={imageRef} className="about-image">
          <div className="image-placeholder">
            <span>摄影师肖像</span>
          </div>
        </div>
      </div>
      <div ref={statsRef} className="about-stats">
        <div className="stat-item">
          <div className="stat-number">500+</div>
          <div className="stat-label">作品数量</div>
        </div>
        <div className="stat-item">
          <div className="stat-number">8+</div>
          <div className="stat-label">摄影经验年</div>
        </div>
        <div className="stat-item">
          <div className="stat-number">50+</div>
          <div className="stat-label">拍摄地点</div>
        </div>
        <div className="stat-item">
          <div className="stat-number">1000+</div>
          <div className="stat-label">满意客户</div>
        </div>
      </div>
    </section>
  );
};

export default AboutSection;